<template>
	<view >
		<view class="content">
			<aloys-tab :tabs="tabs" @change="onTabChange">
				<!-- 全部订单区域 -->
			    <view slot="content0" class="tab_text commodity" v-for="(item,index) in all_orders" >
					<!-- 商品详情加图片区域 -->
					<view class="commodity_content">
						<view  class="commodity_text">
							<!-- 图片区域 -->
							<view class="commodity_img">
								<!-- 商品图片区域 -->
								<image :src="imgUrl+item.img" mode="" @error="item.img='assets/zanwu.png'"></image>
							</view>
							<!-- 商品大小型号区域 -->
							<view class="commodity_color">
								<!-- 商品名称区域 -->
								<view><text>{{item.name}}</text></view>																	
								<view class="commodity_color1">
								<!-- 商品颜色区域 -->
								<text>{{item.color}}</text>
								<!-- 商品型号区域 -->
								<text>{{item.size}}</text>
								</view>			
							</view>
						</view>
						<!-- 商品价格和数量区域 -->
						<view>
							<view class="commodity">
								<!-- 商品价格区域 -->
								<text>￥{{item.spjg}}</text>
							</view>
							<!-- 商品数量区域 -->
							<text>X 1</text>
						</view>
					</view>
					<!-- 商品数量与价格区域 -->
					<view class="price">
						<!-- 商品数量区域 -->
							<view class="price_quantity">
								<text>共计1件商品</text>
							</view>
							<view >
								<!-- 商品价格区域 -->
								<text>合计:￥{{item.spjg}}</text>
							</view>
					</view>
					<!-- 按钮区域 -->
					<view class="anniu">
						<view class="state">
							<text :style="{'color':item.type==='待付款' || item.type==='售后'?'#ff2121':'#999'}">{{item.type}}</text>
						</view>
						<view class="anniu1">
							<view class="anniu_cancl">
								<button  size="mini" @click="chakan(item.but1,
								item.size,item.img,item.spjg,item.name,item.color,
								item.Consignee_Name,item.Consignee_phone,item.Consignee_address,
								item.Odd_Numbers,
								item.title,
								item.kuaidi,
								item.desc,
								item.type
								)">{{item.but1}}</button>
							</view>
							<view class="">
								<button size="mini" @click="chankan2(item.but2,
								item.size,item.img,item.spjg,item.name,item.color,
								item.Consignee_Name,item.Consignee_phone,item.Consignee_address,
								item.Odd_Numbers,
								item.title,
								item.kuaidi,
								item.desc,
								item.type)">{{item.but2}}</button>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 待付款订单数据 -->
				<view slot="content1" class="tab_text commodity" v-for="item in pedding_orders">
				<!-- 商品详情加图片区域 -->
					<view class="commodity_content">
						<view  class="commodity_text">
							<!-- 图片区域 -->
							<view class="commodity_img">
								<!-- 商品图片区域 -->
								<image :src="imgUrl+item.img" mode="" @error="item.img='assets/zanwu.png'"></image>
							</view>
							<!-- 商品大小型号区域 -->
							<view class="commodity_color">
								<!-- 商品名称区域 -->
								<view><text>{{item.name}}</text></view>																	<view class="commodity_color1">
								<!-- 商品颜色区域 -->
								<text>{{item.color}}</text>
								<!-- 商品型号区域 -->
								<text>{{item.size}}</text>
								</view>			
							</view>
						</view>
						<!-- 商品价格和数量区域 -->
						<view>
							<view class="commodity">
								<!-- 商品价格区域 -->
								<text>￥{{item.spjg}}</text>
							</view>
							<!-- 商品数量区域 -->
							<text>X 1</text>
						</view>
					</view>
					<!-- 商品数量与价格区域 -->
					<view class="price">
						<!-- 商品数量区域 -->
							<view class="price_quantity">
								<text>共计1件商品</text>
							</view>
							<view >
								<!-- 商品价格区域 -->
								<text>合计:￥{{item.spjg}}</text>
							</view>
					</view>
					<!-- 按钮区域 -->
					<view class="anniu">
					<view class="state">
						<text>{{item.type}}</text>
					</view>
					<view class="anniu1">
						<view class="anniu_cancl">
							<button size="mini" @click="qxdd()">取消订单</button>
						</view>
						<view class="">
							<button size="mini" @click="fk()">付款</button>
						</view>
						
					</view>
					</view>
				</view>
				
				<!-- 待收货订单数据 -->
				<view slot="content2" class="tab_text commodity" v-for="item in received_orders">
					<!-- 商品详情加图片区域 -->
					<view class="commodity_content">
						<view  class="commodity_text">
							<!-- 图片区域 -->
							<view class="commodity_img">
								<image :src="imgUrl+item.img" mode="" @error="item.img='assets/zanwu.png'"></image>
							</view>
							<!-- 商品大小型号区域 -->
							<view class="commodity_color">
								<view><text>{{item.name}}</text></view>										
								<view class="commodity_color1">
								<text>{{item.color}}</text>
								<text>{{item.size}}</text>
								</view>			
							</view>
						</view>
						<!-- 商品价格和数量区域 -->
						<view>
							<view class="commodity">
								<text>￥{{item.spjg}}</text>
							</view>
							<text>X 1</text>
						</view>
					</view>
					<!-- 商品数量与价格区域 -->
					<view class="price">
						
							<view class="price_quantity">
								<text>共计1件商品</text>
							</view>
							<view >
								<text>合计:￥{{item.spjg}}</text>
							</view>
					</view>
					<!-- 按钮区域 -->
					<view class="anniu">
						<view class="state">
							<text>{{item.type}}</text>
						</view>
						<view class="anniu1">
							<view class="anniu_cancl">
								<button size="mini" @click="ckwl()">查看物流</button>
							</view>
							<view >
								<button size="mini" @click="qrsh()">确认收货</button>
							</view>
						</view>
					</view>
				   </view>
				
				<!-- 待评价订单数据 -->
				
				<!-- 待收货订单数据 -->
				<view slot="content3" class="tab_text commodity" v-for="item in evaluated" >
					<!-- 商品详情加图片区域 -->
					<view class="commodity_content">
						<view  class="commodity_text">
							<!-- 图片区域 -->
							<view class="commodity_img">
								<image :src="imgUrl+item.img" mode="" @error="item.img='assets/zanwu.png'"></image>
							</view>
							<!-- 商品大小型号区域 -->
							<view class="commodity_color">
								<view><text>{{item.name}}</text></view>										
								<view class="commodity_color1">
								<text>{{item.color}}</text>
								<text>{{item.size}}</text>
								</view>			
							</view>
						</view>
						<!-- 商品价格和数量区域 -->
						<view>
							<view class="commodity">
								<text>￥{{item.spjg}}</text>
							</view>
							<text>X 1</text>
						</view>
					</view>
					<!-- 商品数量与价格区域 -->
					<view class="price">
						
							<view class="price_quantity">
								<text>共计1件商品</text>
							</view>
							<view >
								<text>合计:￥{{item.spjg}}</text>
							</view>
						
					</view>
					<!-- 按钮区域 -->
					<view class="anniu4">
						<view class="state">
							<text>待评价</text>
						</view>
						<view class="anniu4">
							<view class="anniu_cancl4">
								<button size="mini" @click="ckwl()()">查看物流</button>
							</view>
							<view >
								<navigator url="/pages/myList/Order_evaluation" hover-class="navigator-hover">
								<button size="mini" @click="pj()">评价</button>
								</navigator>
							</view>
							
						</view>
					</view>
				</view>
				<!-- 已完成订单数据 -->
				
				<view slot="content4" class="tab_text commodity" v-for="item in Completed_orders">
					<!-- 商品详情加图片区域 -->
					<view class="commodity_content">
						<view  class="commodity_text">
							<!-- 图片区域 -->
							<view class="commodity_img">
								<image :src="imgUrl+item.img" mode="" @error="item.img='assets/zanwu.png'"></image>
							</view>
							<!-- 商品大小型号区域 -->
							<view class="commodity_color">
								<view><text>{{item.name}}</text></view>										
								<view class="commodity_color1">
								<text>{{item.color}}</text>
								<text>{{item.size}}</text>
								</view>			
							</view>
						</view>
						<!-- 商品价格和数量区域 -->
						<view>
							<view class="commodity">
								<text>￥{{item.spjg}}</text>
							</view>
							<text>X 1</text>
						</view>
					</view>
					<!-- 商品数量与价格区域 -->
					<view class="price">
						
							<view class="price_quantity">
								<text>共计1件商品</text>
							</view>
							<view >
								<text>合计:￥{{item.spjg}}</text>
							</view>
						
					</view>
					<!-- 按钮区域 -->
					<view class="anniu4">
						<view class="state">
							<text>{{item.type}}</text>
						</view>
						<view class="anniu4">
							<view class="anniu_cancl4">
								<button size="mini" @click="ckwl()">查看物流</button>
							</view>
							<view >
								<button size="mini" @click="sqsh()">申请售后</button>
							</view>
							
						</view>
					</view>
				</view>
				
				<!-- 售后订单订单数据 -->
				<view slot="content5" class="tab_text commodity" v-for="item in after_orders">
					<!-- 商品详情加图片区域 -->
					<view class="commodity_content">
						<view  class="commodity_text">
							<!-- 图片区域 -->
							<view class="commodity_img">
								<image :src="imgUrl+item.img" mode="" @error="item.img='assets/zanwu.png'"></image>
							</view>
							<!-- 商品大小型号区域 -->
							<view class="commodity_color">
								<view><text>{{item.name}}</text></view>										
								<view class="commodity_color1">
								<text>{{item.color}}</text>
								<text>{{item.size}}</text>
								</view>			
							</view>
						</view>
						<!-- 商品价格和数量区域 -->
						<view>
							<view class="commodity">
								<text>￥{{item.spjg}}</text>
							</view>
							<text>X 1</text>
						</view>
					</view>
					<!-- 商品数量与价格区域 -->
					<view class="price">
						
							<view class="price_quantity">
								<text>共计1件商品</text>
							</view>
							<view >
								<text>合计:￥{{item.spjg}}</text>
							</view>
						
					</view>
					<!-- 按钮区域 -->
					<view class="anniu">
						<view class="state">
							<text >{{item.type}}</text>
						</view>
						<view class="anniu1">
							<view class="anniu_cancl">
								<button size="mini" @click="ckwl()">查看物流</button>
							</view>
							<view >
								<button size="mini" @click="cksh()">查看售后</button>
							</view>
							
						</view>
					</view>
				</view>
			</aloys-tab>
		</view>
		
	</view>

</template>

<script>
import http from '../../until/http.js'
import aloysTab from "@/components/aloys-tab/aloys-tab.vue"
import date from '../../static/time.js' 
export default {
  components: { aloysTab },
  data() {
    return {
	// 获取图片的路径
	imgUrl:'http://localhost:8888/getImg?sort=',
      tabs: [{
				title: '全部'
			  },{
				title: '待付款'
			  },{
				title: '待收货'
			  },
			  {
				title: '待评价'
			  },
			  {
				title: '已完成'
			  }
			  ,{
				title: '售后'
	  }],
	  // 存放全部订单数据
	  all_orders:{},
	  // 存放售后订单数据
	  after_orders:{},
	  // 已完成订单数据
	  Completed_orders:{},
	  // 待评价订单数据
	  evaluated:{},
	  // 待收货订单数据
	  received_orders:{},
	  // 待付款订单数据
	  pedding_orders:{},
	  // 存储收货人地址信息
	  address_info:{}
    }
  },
  onLoad() {
		this.getall_orders();
		this.getafter_orders();
		this.getCompleted_order();
		this.getevaluated();
		this.getreceived();
		this.getpedding_orders();
  },
  methods: {
	    // 全部订单数据
		getall_orders(){
		 http({
		       url:'/getwxorders',
		       method:'get',
		     }).then((res)=>{
			   res.data.data.forEach((v)=>{
				   // 数据库拿出时间的时进行过滤
				  v.desc =date.dateFn(v.desc);
				   if(v.type=='待付款'){
					   v.but1='取消订单';
					   v.but2='付款';
				   }else if(v.type=='待收货'){
					  v.but1='查看物流';
					  v.but2='确认收货';
				   }else if(v.type=='待评价'){
					  v.but1='查看物流';
					  v.but2='评价';
				   }else if(v.type=='已完成'){
					  v.but1='查看物流';
					  v.but2='申请售后';
				   }else if(v.type=='售后'){
					  v.but1='查看物流';
					  v.but2='查看售后';
				   }
			   })
			   this.all_orders=res.data.data;
			   // console.log(this.all_orders);
		     })
		},
	    // 售后订单数据
		getafter_orders(){
	  		 http({
	  		       url:'/get_after_orders',
	  		       method:'get',
	  		     }).then((res)=>{
	  				 this.after_orders=res.data.data
	  		     })
		},
	    // 已完成订单数据
		getCompleted_order(){
	  		http({
	  		       url:'/Completed_order',
	  		       method:'get',
	  		     }).then((res)=>{
	  				 this.Completed_orders=res.data.data
	  		       // console.log(this.Completed_orders);
	  		    })
		},
	    //待评价订单数据
	    getevaluated(){
		  http({
			  url:'/evaluated',
			method:'get',
		  }).then((res)=>{
			  this.evaluated=res.data.data
		  })
	  },
	    //待收货订单数据
	    getreceived(){
	  		  http({
	  			url:'/received',
	  			method:'get',
	  		  }).then((res)=>{
	  			  this.received_orders=res.data.data
	  		  })
	   },
		// 待付款订单数据
		getpedding_orders(){
			http({
				url:'/pedding',
				method:'get',
			}).then((res)=>{
				this.pedding_orders=res.data.data
			})
			
		},
		// 查看物流，取消订单的页面跳转
		chakan(v,a,b,c,d,e,f,h,g,j,i,k,o,q){
			this.getall_orders();
				if(v=='取消订单'){
					uni.navigateTo({
					    url:'/pages/myList/order_details'
					});	
					let allData=[v,a,b,c,d,e,f,h,g,j,i,k,o,q]
					this.$store.commit('getMsg',allData)
				}else if(v=='查看物流'){
					uni.navigateTo({
					    url:"/pages/myList/Delivery_status" 
					})
					let allData=[v,a,b,c,d,e,f,h,g,j,i,k,o,q]
					this.$store.commit('getMsg',allData)
				}
		},
		qxdd(){
			this.getall_orders();
			uni.navigateTo({
			    url:"/pages/myList/order_details" 
			})
		},
		sqsh(){
			this.getall_orders();
			uni.navigateTo({
			    url:"/pages/myList/sqsh" 
			})
		},
		ckwl(){
			this.getall_orders();
			uni.navigateTo({
			    url:"/pages/myList/Delivery_status" 
			})
		},
		qrsh(){
			this.getall_orders();
			uni.navigateTo({
			    url:"/pages/myList/order_details" 
			})
		},
		fk(){
			this.getall_orders();
			uni.navigateTo({
			    url:"/pages/spxq_wyc/spxq_wyc" 
			})
		},
		cksh(){
			this.getall_orders();
			uni.navigateTo({
			    url:"/pages/myList/state" 
			})
		},
		// 评价，付款，查看售后，确认收货页面跳转
		chankan2(v,a,b,c,d,e,f,h,g,j,i,k,o,q){
			this.getall_orders();
			
			if(v=='评价'){
				uni.navigateTo({
				    url:"/pages/myList/pj" 
				})
				let allData=[v,a,b,c,d,e,f,h,g,j,i,k,o,q]
				this.$store.commit('getMsg',allData)
			}else if(v=='付款'){
				uni.navigateTo({
				    url:"/pages/spxq_wyc/spxq_wyc" 
				})
				let allData=[v,a,b,c,d,e,f,h,g]
				this.$store.commit('getMsg',allData)
			}else if(v=='申请售后'){
				uni.navigateTo({
				    url:"/pages/myList/sqsh" 
				})
				let allData=[v,a,b,c,d,e,f,h,g]
				this.$store.commit('getMsg',allData)
			}else if(v=='确认收货'){
				uni.navigateTo({
				    url:"/pages/myList/dsh" 
				})
				
				let allData=[v,a,b,c,d,e,f,h,g,j,i,k,o,q]
				this.$store.commit('getMsg',allData)
			}else if(v=='查看售后'){
				uni.navigateTo({
				    url:"/pages/myList/cksh" 
				})
				let allData=[v,a,b,c,d,e,f,h,g,j,i,k,o,q]
				this.$store.commit('getMsg',allData)
			}	
		},
		
  }
}
</script>

<style lang="less" scoped>
	// button{
	// 	font-size: mini;
	// }
	.anniu4{
		
		.state{
		
			display: flex;
			 align-items:center;
			text{
				color: #999;
			}
		}
	}
	.content{
		top: 10px;
		bottom: 5px;
	  position: absolute;
	  height: 100%;
	}
	.tab_text{
	  // font-size: 42rpx;
	  // font-weight: bold;
	  padding: 100rpx 0;
	  text-align: center;
	}
	.commodity{
		padding: 10px 20px;
		display: flex;
		flex-direction:column;
		.anniu4{
			display: flex;
			justify-content: space-between;
			margin-top: 3px;
			
			.anniu_cancl4{
				margin-right: 5px;
				
				display: flex;
				 align-items:center;
			}
		}
		.anniu3{
			display: flex;
			justify-content: flex-end;
		
			.anniu_cancl3{
				margin-right: 5px;
			}
		}
		.anniu2{
			display: flex;
			justify-content: flex-end;
		
			.anniu_cancl2{
				margin-right: 5px;
			}
		}
		.anniu{
			display: flex;
			justify-content: space-between;
			margin-top: 3px;
			.state{
				display: flex;
				 align-items:center;
				 color: red;
			}
			.anniu1{
				display: flex;
				.anniu_cancl{
					margin-right: 5px;
				}
			}
			
		}
		.price{
			display: flex;
			justify-content: flex-end;
			margin-right: 10px;
			margin: 3px 0;
			.price_quantity{
				margin-right: 10px;
			}
		}
		.commodity_text{
			display: flex;
			flex-direction:row;
			.commodity_img{
				width: 80px;
				height: 80px;
				padding-top: 10px;
				image{
					width: 100%;
					height: 100%;
					width: 80px;
					height: 80px;
					
				}
			}
			.commodity_color{
				padding: 5px 40px 5px 25px;
				display: flex;
				flex-direction:column;
				
				.commodity_color1{
					margin-top: 10px;
					color: #999999;
					display: flex;
					justify-content: flex-start;
				}
				
			}
		}
		.commodity_content{
			display: flex;
			flex-direction:row;
		}
	}	
</style>